/*1.背景图：可以移动*/
body{
	/*背景复合属性：路径地址：相对路径+图片全称*/
	background: url(../img/bg.jpg) no-repeat;
	/*背景图尺寸属性：数值px/%     宽度   高度*/
	 background-size: 100% 823px;
}	 
/*2.标题*/
h1{
	/*文字放大*/
	font-size: 60px;
	/*文本字体：华文彩云*/
	font-family: "华文彩云";
	/*文本加粗*/
	font-weight: 900;
	/*文本阴影*/
	text-shadow: 5px 5px 10px #aaaaff;
	/*字体颜色*/
	color: #aaaaff;
	/*透明度:0~1*/
	opacity: .5;
}
/*熊--空间+背景图--移动*/
#bear{
	width: 400px;
	height: 400px;
	border: 1px solid red;
	/*背景图*/
	background: url(../img/bear_1.png) no-repeat;
	/*背景图占满整个熊空间*/
	background-size: 100% 100%;
	/*微调定位*/
	position: relative;
	left: -42px;
	top: -123px;
	/*启动动画*/
	animation:bear 20s linear infinite;
}

/*创建关键帧 背景图改变，位置改变，*/
@keyframes bear{
	0%{
		/*第一zhu组必须原始位置*/
		background: url(../img/bear_1.png) no-repeat;
		/*背景尺寸*/
		background-size: 100% 100%;
		left: -42px;
		top: -123px;
	}
	10%{
		background: url(../img/bear_1.png) no-repeat;
		background-size: 100% 100%;
		left: 100px;
		top: 100px;
		transform: rotate(200deg) scale(1.2);
	}
	20%{
		background: url(../img/bear_2.png) no-repeat;
		background-size: 100% 100%;
		left: 347px;
		top: -44px;
		transform: rotate(300deg) scale(1.2);
	}
	30%{
		background: url(../img/bear_3.png) no-repeat;
		background-size: 100% 100%;
		left: 529px;
		top: 135px;
		transform: rotate(400deg) scale(1.2);
	}
	40%{
		background: url(../img/bear_4.png) no-repeat;
		background-size: 100% 100%;
		left: 200px;
		top: -199px;
		transform: rotate(500deg) scale(1.2);
	}
	50%{
		background: url(../img/bear_5.png) no-repeat;
		background-size: 100% 100%;
		left: 100px;
		top: 300px;
		transform: rotate(700deg) scale(1.2);
	}
	60%{
		background: url(../img/bear_6.png) no-repeat;
		background-size: 100% 100%;
		left: 200px;
		top: 100px;
		transform: rotate(800deg) scale(1.2);
	}
	70%{
		background: url(../img/bear_7.png) no-repeat;
		background-size: 100% 100%;
		left: 200px;
		top: 200px;
		transform: rotate(500deg) scale(1.2);
	}
	80%{
		background: url(../img/bear_8.png) no-repeat;
		background-size: 100% 100%;
		left: 350px;
		top: 300px;
		transform: rotate(400deg) scale(1.2);
	}
	90%{
		background: url(../img/bear_9.png) no-repeat;
		background-size: 100% 100%;
		left: 150px;
		top: 0px;
		transform: rotate(200deg) scale(1.2);
	}
	100%{
		background: url(../img/bear_10.png) no-repeat;
		background-size: 100% 100%;
		left: 0px;
		top: 100px;
		transform: rotate(100deg) scale(1.2);
	}
}
